<template>
    <div class="wrapper">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="onClick">
            <el-tab-pane label="字段配置" name="first">
                <FieldConfig />
            </el-tab-pane>
            <el-tab-pane label="排序条件" name="second">
                <SortConfig />
            </el-tab-pane>
            <el-tab-pane label="按钮配置" name="third">
                <ButtonConfig />
            </el-tab-pane>
            <el-tab-pane label="列表过滤" name="fourth">
                <ListFilter />
            </el-tab-pane>
            <el-tab-pane label="表头设置" name="fifth">
                <HeaderConfig />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import FieldConfig from "./components/FieldConfig.vue"
import SortConfig from "./components/SortConfig.vue"
import ButtonConfig from "./components/ButtonConfig.vue"
import ListFilter from "./components/ListFilter.vue"
import HeaderConfig from "./components/HeaderConfig.vue"
const activeName = ref('first')

const onClick = (tab, event) => {
    console.log(tab, event)
}
</script>

<style lang='less' scoped>
.wrapper {
    width: 100%;
    background: rgb(255, 255, 255)!important;
    padding: 30px;
    border-radius: 5px;
    height: auto!important;
}

.demo-tabs /deep/ .el-tabs__content {
    height: auto!important;
    background: rgb(255, 255, 255)!important;
}

.demo-tabs /deep/ .el-tabs__nav {
    width: 480px !important;
    float: left !important;
    border-bottom: 0 !important;
}

.demo-tabs /deep/ .el-tabs__item {
    font-weight: bold;
    height: 36px !important;
}
</style>